<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <title>datepicker 组件</title>
    <link href="../../../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <link href="../../../node_modules/font-awesome/css/font-awesome.css" rel="stylesheet">
    <script src="../../../tests/mod.js"></script>
</head>
<body>
    <div :controller="test">
        <xmp is="ms-form" :widget="{$form: @$form}">
            <ms-form-item :widget="{label:'入学时间'}">
                <ms-datepicker :widget="{
                    placeholder:'请选择入学时间',
                    col:'date',
                    format:'YYYY/MM/DD',
                    startDate:'2017/5/26',
                    endDate:'2018/7/26',
                    $rules:{required:true,message:'请选择日期'}
                }"></ms-datepicker>
            </ms-form-item>
            <ms-form-item :widget="{label:'抢购开始时间'}">
                <ms-datepicker :widget="{
                    placeholder:'请选择抢购开始时间',
                    col:'datetime',
                    startDate:'2017-5-26',
                    endDate:'2018-7-26',
                    showTime: true,
                    $rules:{required:true,message:'请选择日期和时间'}
                }"></ms-datepicker>
            </ms-form-item>
            <ms-form-item :widget="{label:'打卡时间'}">
                <ms-timepicker :widget="{
                    placeholder:'请选择打卡时间',
                    col:'time',
                    $rules:{required:true,message:'请选择时间'}
                }"></ms-timepicker>
            </ms-form-item>
        </xmp>
        <pre>{{@json}}</pre>
    </div>
    <script>
        require(['../../../tests/index.js'], function () {
            var createForm = require('../../ms-form/create-form').createForm;
            require('../../ms-form');
            require('../');
            require('../../ms-timepicker/ms-timepicker');

            var vm = avalon.define({
                $id: 'test',
                json: '',
                $form: createForm({
                    onFieldsChange: function (fields, record) {
                        vm.json = JSON.stringify(record);
                    }
                })
            });
        });
    </script>
</body>
</html>